class EchartsOption {

    constructor(data=[], options={}) {
        this.isShowX = options.isShowX
        this.stockName = options.stockName
        this.xAxisData = data.xAxisData
        this.xAxisAllData = data.xAxisAllData
        this.newklines = data.newklines
        this.upDownData = data.upDownData
        this.lineData = data.lineData
        this.lineSegmentData = data.lineSegmentData
        this.macd = data.macd
        this.diff = data.diff
        this.dea = data.dea
        this.volumes = data.volumes
    }

    getMarkPoint(list){
        let arr = []

        for (let i = 0; i < list.length; i++) {
            if (list[i].upDown === 'up') {
                // 顶型
                arr.push({
                    name: 'Mark',
                    coord: [list[i].date, list[i].value],
                    value: '顶',
                    symbolRotate: 180,
                    symbolOffset: [0, '-100%'],
                    itemStyle: {
                        color: 'rgb(0,0,0)'
                    }
                })
            } else if (list[i].upDown === 'down') {
                // 底型
                arr.push({
                    name: 'Mark',
                    coord: [list[i].date, list[i].value],
                    value: '底',
                    symbolOffset: [0, '100%'],
                    itemStyle: {
                        color: 'rgb(255,0,0)'
                    }
                })
            }
        }

        return {
            symbol: 'triangle',
            symbolSize: 5,
            label: {
                show: false
            },
            data: arr,
            tooltip: {
                formatter: function (param) {
                    return '';
                }
            }
        }
    }

    getMarkLine(list){
        let arr = []
        let lines = list.filter(item => item.line);

        for (let i = 0; i < lines.length - 1; i++) {
            arr.push(
                {
                    coords: [
                        [lines[i].date, lines[i].value],
                        [lines[i + 1].date, lines[i + 1].value]
                    ]
                }
            )
        }

        return {
            symbol: ['none', 'none'],
            lineStyle: {
                color: '#409eff',
                type: 'solid',
                width: 2,
                opacity: 1,
            },
            zlevel: 3,
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            data: arr,
            label: {
                show: false,
                position: 'middle',
                color: '#fff',
                backgroundColor: '#cb2020',
                padding: 2,
                fontSize: 10,
                fontWeight: 400,
                formatter: function (params) {
                    let coords = params.data.coords;
                    let a = coords[0][1];
                    let b = coords[1][1];
                    if(a < b) {
                        return '+' +  ((b - a) * 100/ a).toFixed(2) + '%'
                    } else {
                        return '-' + ((a - b) * 100/ b).toFixed(2) + '%'
                    }
                }
            },
            tooltip: {
                formatter: function (params) {
                    let coords = params.data.coords;
                    let a = coords[0][1];
                    let b = coords[1][1];
                    if(a < b) {
                        return  ((b - a) * 100/ a).toFixed(2) + '%'
                    } else {
                        return  ((a - b) * 100/ b).toFixed(2) + '%'
                    }
                }
            }
        }
    }


    getMarkLineSegment(lines) {
        let  arr = []

        for (let i = 0; i < lines.length - 1; i++) {
            if(lines[i].upDown !== lines[i+1].upDown) {
                arr.push(
                    {
                        coords: [
                            [lines[i].date, lines[i].value],
                            [lines[i + 1].date, lines[i + 1].value]
                        ]
                    }
                )
            }else {
                if(arr[arr.length - 1]){
                    arr[arr.length - 1].coords[1] = [lines[i + 1].date, lines[i + 1].value]
                }
            }

        }

        return {
            symbol: ['none', 'none'],
            lineStyle: {
                color: '#cb2020',
                type: 'solid',
                width: 2,
                opacity: 1,
            },
            zlevel: 3,
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            data: arr,
            label: {
                show: false,
                position: 'middle',
                color: '#fff',
                backgroundColor: '#cb2020',
                padding: 2,
                fontSize: 10,
                fontWeight: 400,
                formatter: function (params) {
                    let coords = params.data.coords;
                    let a = coords[0][1];
                    let b = coords[1][1];
                    if(a < b) {
                        return '+' +  ((b - a) * 100/ a).toFixed(2) + '%'
                    } else {
                        return '-' + ((a - b) * 100/ b).toFixed(2) + '%'
                    }
                }
            },
            tooltip: {
                formatter: function (params) {
                    let coords = params.data.coords;
                    let a = coords[0][1];
                    let b = coords[1][1];
                    if(a < b) {
                        return  ((b - a) * 100/ a).toFixed(2) + '%'
                    } else {
                        return  ((a - b) * 100/ b).toFixed(2) + '%'
                    }
                }
            }
        }
    }

    calculateMA (dayCount, list){
        let result = [];

        for (let i = 0; i < list.length; i++) {
            if (i < dayCount) {
                result.push('-');
                continue;
            }
            let sum = 0;
            for (let j = 0; j < dayCount; j++) {
                sum += +list[i - j][1];
            }
            result.push(Number((sum / dayCount).toFixed(2)));
        }
        return result;
    }



    getMA(list, day = 5, color = '#909399'){
        return {
            name: 'MA' + day,
            type: 'line',
            symbol: 'none',
            data: this.calculateMA(day, list),
            smooth: true,
            lineStyle: {
                opacity: 1,
                color,
                width: 1
            }
        }
    }

    getDiffDeaLine(name, diff, index, color = '#909399'){
        return {
            name,
            type: 'line',
            symbol: 'none',
            xAxisIndex: index,
            yAxisIndex: index,
            data: diff,
            lineStyle: {
                opacity: 0.7,
                color,
                width: 1
            }
        }
    }

    getBar(name, data, index, barWidth = 4){
        return {
            name,
            type: 'bar',
            barWidth,
            xAxisIndex: index,
            yAxisIndex: index,
            data
        }
    }




    getTitle() {
        return {
            show: this.isShowX,
            text: this.stockName
        }
    }
    getToolTip() {
        return {
            axisPointer: {
                type: 'cross',
                label: {
                    show: this.isShowX
                }
            }
        }
    }
    getAxisPointer(){
        return {
            link: [
                {
                    xAxisIndex: 'all'
                }
            ],
            label: {
                backgroundColor: '#777'
            }
        }
    }
    getVisualMap(){
        return [
            {
                show: false,
                seriesIndex: 1,
                dimension: 2,
                pieces: [
                    {
                        value: 1,
                        color: '#eb5454'
                    },
                    {
                        value: -1,
                        color: '#47b262'
                    }
                ]
            },
            {
                show: false,
                seriesIndex: 4,
                dimension: 2,
                pieces: [
                    {
                        value: 1,
                        color: '#eb5454'
                    },
                    {
                        value: -1,
                        color: '#47b262'
                    }
                ]
            }
        ]
    }

    getGrid(){
        return  [
            {
                left: '8%',
                right: '4%',
                top: '5%',
                height: '55%'
            },
            {
                left: '8%',
                right: '4%',
                top: '65%',
                height: '15%'
            },
            {
                left: '8%',
                right: '4%',
                top: '81%',
                height: '15%'
            }
        ]
    }

    getYAxis() {
        return [
            {
                scale: true,
                splitArea: {
                    show: true
                }
            },
            {
                scale: true,
                gridIndex: 1,
                splitNumber: 2,
                axisLabel: {show: false},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false}
            },
            {
                scale: true,
                gridIndex: 2,
                splitNumber: 2,
                axisLabel: {show: false},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine: {show: false}
            }
        ]
    }

    getXAxis() {
        return [ {
            type: 'category',
            data: this.xAxisData,
            boundaryGap: false,
            axisLine: {onZero: false},
            splitLine: {show: false},
            min: 'dataMin',
            max: 'dataMax',
            axisPointer: {
                z: 100
            },
            show: this.isShowX,

        }, {
            type: 'category',
            gridIndex: 1,
            data: this.xAxisAllData,
            boundaryGap: false,
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: '#D4D7DE'
                }
            },
            show: this.isShowX,
        }, {
            type: 'category',
            gridIndex: 2,
            data: this.xAxisAllData,
            boundaryGap: false,
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: '#D4D7DE'
                }
            },
            show: this.isShowX,
        }]
    }

    getSeries(){

        return [
            {
                name: 'K线',
                type: 'candlestick',
                data: this.newklines,
                tooltip: {
                    show: this.isShowX
                },
                markPoint: this.getMarkPoint(this.upDownData)
            },
            this.getBar('macd', this.macd, 1, 2),
            this.getDiffDeaLine('diff', this.diff, 1),
            this.getDiffDeaLine('dea', this.dea, 1, '#E6A23C'),
            this.getBar('volume', this.volumes, 2, 2),
            this.getMarkLine(this.lineData),
            this.getMarkLineSegment(this.lineSegmentData),
            this.getMA(this.newklines),
            this.getMA(this.newklines, 10, '#E6A23C'),
            this.getMA(this.newklines, 20, '#800080'),
            this.getMA(this.newklines, 60, '#67c23a'),
            this.getMA(this.newklines, 250, '#409eff'),
        ]
    }

    getToolBox() {
        return {
            show: true,
            feature: {
                // 保存为图片
                saveAsImage: {
                    show: true,
                    title: '保存图片',
                    type: 'png', // 图片类型，支持 'png' | 'jpeg'
                    pixelRatio: 2, // 输出分辨率比例
                    lang: ['点击保存'] // 自定义按钮文字
                }
            }
        }
    }


    getOption() {
        return {
            title: this.getTitle(),
            toolbox: this.getToolBox(),
            tooltip: this.getToolTip(),
            axisPointer: this.getAxisPointer(),
            visualMap: this.getVisualMap(),
            grid: this.getGrid(),
            yAxis: this.getYAxis(),
            xAxis: this.getXAxis(),
            series: this.getSeries()
        }
    }

}

export default EchartsOption